<template>
  <div class="y-table">
    <vxe-grid
      v-bind="optionsComputed"
      :height="height || '100%'"
      :align="allAlign"
      :columns="columnsComputed"
      :data="data"
      :edit-config="edit ? { trigger: 'click', mode: 'cell' } : {}"
      ref="$table"
    >
      <!--使用 bottom 插槽-->
      <template v-slot:bottom v-if="edit">
        <div class="grid-bottom-tools">
          <y-button
            type="text"
            icon="plus"
            label="增加行"
            @click="api.insertAt([{}], -1)"
          ></y-button>
          <y-button
            type="text"
            icon="delete"
            label="删除行"
            @click="api.remove(api.getCurrentRecord())"
          ></y-button>
        </div>
      </template>
      <!-- 分页 -->
      <template v-slot:pager v-if="page">
        <el-pagination
          layout="prev, pager, next"
          small
          :total="50"
        ></el-pagination>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
export default {
  name: "y-table",
  props: {
    data: Array,
    columns: Array,
    height: String,
    page: Boolean,
    edit: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
  },
  data() {
    return {
      options: {
        border: true,
        resizable: true,
        showOverflow: true,
        highlightHoverRow: true,
        highlightCurrentRow: true,
        highlightHoverColumn: true,
        highlightCurrentColumn: true,
      },
      api: null,
      allAlign: null,
    };
  },
  computed: {
    optionsComputed(){
      var _this = this
      var options = _this.options
      
      return options
    },
    columnsComputed() {
      var _this = this;
      var columns = _this.columns;
      columns.forEach((c) => {
        if (c.field)
          c["editRender"] = { name: "input", attrs: { type: "text" } };
        if (c.type == "seq") {
          c.formatter = _this.seqFormatter;
        }
      });
      return columns;
    },
  },
  created() {},
  mounted() {
    this.api = this.$refs.$table;
  },
  methods: {
    seqFormatter(params) {
    },
  },
};
</script>


<style lang="scss" scoped>
.y-table {
  height: 100%;
  .grid-bottom-tools {
    padding: 0 10px;
    background-color: #f8f8f9;
    .el-button--text {
      color: #333333;
    }
  }
  .el-pagination {
  }
}
</style>